<template>
  <div class="bre-input" :class="[size]">
    <input
      type="text"
      :placeholder="placeholder"
      class="bre-input__inner"
      v-model="inputValue"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
const props = withDefaults(
  defineProps<{
    modelValue: string
    placeholder?: string
    size?: 'medium' | 'small'
  }>(),
  { modelValue: '', placeholder: '', size: 'medium' }
)
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()
const inputValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  },
})
</script>
<style lang="scss" scoped></style>
